<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { usePlayerStore } from '@/stores/player'
import { getHotMusic, getMusicById } from '@/api/music'
import type { Music } from '@/stores/player'

const router = useRouter()
const playerStore = usePlayerStore()
const hotMusics = ref<Music[]>([])
const currentIndex = ref(0)
let autoplayInterval: number | null = null

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % hotMusics.value.length
}

const prevSlide = () => {
  currentIndex.value = currentIndex.value === 0 
    ? hotMusics.value.length - 1 
    : currentIndex.value - 1
}

onMounted(async () => {
  try {
    const musics = await getHotMusic()
    hotMusics.value = musics
    startAutoplay()
  } catch (error) {
    console.error('获取热门音乐失败:', error)
    hotMusics.value = []
  }
})

const startAutoplay = () => {
  autoplayInterval = window.setInterval(nextSlide, 3000)
}

onBeforeUnmount(() => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval)
  }
})

const playMusic = async (music: Music) => {
  try {
    const musicDetail = await getMusicById(music.id)
    await playerStore.playMusic(musicDetail)
    playerStore.isPlaying = true
    router.push({
      name: 'Detail',
      params: { id: music.id }
    })
  } catch (error) {
    console.error('播放音乐失败:', error)
  }
}
</script>

<template>
  <section class="hot-music">
    <h2 class="section-title">热门音乐</h2>
    <div class="carousel">
      <div class="carousel-content" 
           :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(music, index) in hotMusics" 
             :key="music.id"
             class="carousel-item"
             :class="{ active: currentIndex === index }"
             @click="playMusic(music)">
          <div class="music-card">
            <div class="cover-wrapper">
              <img :src="music.cover" :alt="music.title">
              <div class="play-overlay">
                <div class="play-icon">
                  <i class="iconfont icon-play"></i>
                </div>
              </div>
            </div>
            <div class="music-info">
              <h3>{{ music.title }}</h3>
              <p>{{ music.artist }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="carousel-controls">
        <button class="prev" @click="prevSlide">
          <div class="arrow-icon"></div>
        </button>
        <button class="next" @click="nextSlide">
          <div class="arrow-icon"></div>
        </button>
      </div>
    </div>
  </section>
</template>

<style scoped lang="scss">
.hot-music {
  padding: 20px 0;
  
  .section-title {
    color: var(--primary-color);
    font-size: 1.8em;
    margin-bottom: 28px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(to right, var(--primary-color), var(--theme-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    text-align: left;
    margin-left: 20px;

    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, var(--theme-color), transparent);
      border-radius: 2px;
    }
  }
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  
  &-content {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  &-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    
    .music-card {
      width: 70%;
      max-width: 800px;
      height: 300px;
      background: color-mix(in srgb, var(--bgc-color-2) 40%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      border: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
      cursor: pointer;
      
      &:hover {
        transform: translateY(-5px);
        background: color-mix(in srgb, var(--bgc-color-1) 50%, transparent);
        border-color: color-mix(in srgb, var(--theme-color) 20%, transparent);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
        
        .play-overlay {
          opacity: 1;
        }
      }
      
      .cover-wrapper {
        position: relative;
        width: 45%;
        height: 100%;
        overflow: hidden;
        border-right: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.6s ease;
        }
        
        .play-overlay {
          position: absolute;
          inset: 0;
          background: color-mix(in srgb, var(--bgc-color-1) 60%, transparent);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
          
          .play-icon {
            width: 60px;
            height: 60px;
            background: color-mix(in srgb, var(--theme-color) 90%, transparent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            backdrop-filter: blur(5px);
            
            i {
              font-size: 30px;
              color: white;
            }
            
            &:hover {
              transform: scale(1);
              background: var(--theme-color);
            }
          }
        }
      }
      
      .music-info {
        flex: 1;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        cursor: pointer;
        
        h3 {
          font-size: 24px;
          font-weight: 700;
          background: linear-gradient(45deg, var(--primary-color), var(--theme-color));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 0;
          transition: transform 0.3s ease;
        }
        
        p {
          font-size: 16px;
          color: color-mix(in srgb, var(--primary-color) 80%, transparent);
          margin: 0;
          transition: color 0.3s ease;
        }

        &:hover {
          h3 {
            transform: translateX(5px);
          }
          
          p {
            color: var(--theme-color);
          }
        }
      }
    }
  }
  
  &-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    pointer-events: none;
    z-index: 10;
    
    button {
      pointer-events: auto;
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.3);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      position: relative;
      
      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }
      
      .arrow-icon {
        width: 12px;
        height: 12px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
      }
      
      &.prev .arrow-icon {
        transform: rotate(-135deg);
      }
      
      &.next .arrow-icon {
        transform: rotate(45deg);
      }
    }
  }
}

@media (max-width: 768px) {
  .carousel {
    height: 500px;
    
    &-item {
      .music-card {
        width: 85%;
        height: 400px;
        
        .cover-wrapper {
          height: 45%;
        }
        
        .music-info {
          padding: 20px;
          
          h3 {
            font-size: 20px;
            margin-bottom: 8px;
          }
          
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>